<template>
    <div class="login">
        <div class="login-box">
            <h3>手机号登录</h3>

            <!-- 手机号输入框 -->
            <van-field
                v-model="mobile"
                label="手机号"
                placeholder="请输入手机号"
            />

            <!-- 验证码输入框 -->
            <van-field
                v-model="sms"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
            >
                <template #button>
                    <van-button
                        size="small"
                        type="primary"
                        @click="onSendSms"
                        :disabled="!canSend || alreadySend"
                        >{{ btnText }}</van-button
                    >
                </template>
            </van-field>

            <!-- 登录按钮 -->
            <van-button @click="onLoginClicked" block type="primary"
                >登录</van-button
            >
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mobile: "",
            sms: "",
            alreadySend: false,
            btnText: "发送验证码",
        };
    },
    methods: {
        async onSendSms() {
            const { mobile } = this;
            // 已经发送（上锁）
            this.alreadySend = true;
            // 设置倒计时
            let num = 59;
            // 因为定时器是一秒以后才执行，为了和按钮的禁用效果保持一直，我们在点击后，立即修改一次按钮的文本
            this.btnText = `重新发生验证码(${num}s)`;
            // 倒计时效果
            let intervalId = setInterval(() => {
                if (num > 1) {
                    num--;
                    this.btnText = `重新发生验证码(${num}s)`;
                } else {
                    this.btnText = `发送验证码`;
                    clearInterval(intervalId);
                    this.alreadySend = false;
                }
            }, 1000);
            // 调用验证码生成接口，获取验证码
            const res = await this.$http.post("/codes", { mobile });
            console.log("res", res);
        },
        async onLoginClicked() {
            const { mobile, sms } = this;
            const res = await this.$http.post("/login", { mobile, code: sms });
            // console.log("res", res);
            // 登录失败
            if (res.code !== 200) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            // 登录成功
            // 保存登录状态
            window.sessionStorage.setItem("token", res.data.token);
            window.sessionStorage.setItem(
                "user",
                JSON.stringify(res.data.user)
            );
            // 跳转页面
            this.$router.push("/bwl/list");
        },
    },
    computed: {
        canSend() {
            return this.mobile && /^1[3579]\d{9}$/.test(this.mobile);
        },
    },
};
</script>

<style lang="less" scoped>
.login {
    height: 100vh;
    padding: 10px 0px;

    &-box {
        margin-top: 130px;

        h3 {
            text-align: center;
            margin-bottom: 30px;
        }

        .van-field,
        .van-button {
            margin-top: 10px;
        }
    }
}
</style>
